<template>
  <div>
    <el-card>
      <i class="el-icon-s-order" style="font-size: 18px; margin-right: 6px"></i>
      <span>商品分类列表</span>
      <el-button
        @click="$router.push('/pm/productCateAdd')"
        size="mini"
        class="tian"
        >添加</el-button
      >
    </el-card>
    <!-- <div slot="header" class="clearfix">
      
    </div> -->
    <!-- 表格 -->
    <el-table :data="tableData" border v-loading="isLoading" align="center">
      <el-table-column prop="id" label="编号" align="center" width="100px">
      </el-table-column>

      <el-table-column prop="name" label="分类名称" align="center">
      </el-table-column>
      <el-table-column label="级别" align="center">
        <template slot-scope="scope">
          {{ scope.row.parent_id ? "二级" : "一级" }}
        </template>
      </el-table-column>
      <el-table-column prop="product_unit" label="数量单位" align="center">
      </el-table-column>
      <el-table-column label="移动端显示" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.nav_status"
            :active-value="1"
            :inactive-value="0"
            @change="yidongduan(scope.$index, scope.row)"
          >
          </el-switch>
        </template> </el-table-column
      >
      <el-table-column label="是否启用" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.show_status"
            :active-value="1"
            :inactive-value="0"
            @change="shifouqiyong(scope.$index, scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" align="center">
      </el-table-column>
      <el-table-column prop="address" label="设置" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="xiayiji(scope.$index, scope.row)"
            :disabled="scope.row.parent_id ? true : false"
          >
            查看下一级
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="bianji(scope.$index, scope.row)"
            >编辑</el-button
          >

          <el-button
            type="danger"
            size="mini"
            @click="shanchu(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNum"
        :page-sizes="[5, 6, 7, 8]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getCategory, //获取分类列表
  delCategory, //删除分类
  updateCategory, //更新分类
} from "../../../../api/categoryApi";
export default {
  data() {
    return {
      parentId: 0,
      tableData: [],
      isLoading: false,
      total: 0,
      pageSize: 5,
      pageNum: 1,
    };
  },
  created() {
    this.getList();
  },
  watch: {
    $route() {
      this.erji();
      this.getList();
    },
  },
  methods: {
    //二级分类重置
    erji() {
      this.pageNum = 1;
      if (this.$route.query.parentId !== undefined) {
        this.parentId = this.$route.query.parentId;
      } else {
        this.parentId = 0;
      }
    },
    //获取数据
    getList() {
      this.isLoading = true;
      getCategory(this.parentId, this.pageNum, this.pageSize).then((res) => {
        console.log(res);
        if (res.status === 1) {
          this.$message.success(res.msg);
          this.isLoading = false;
          this.tableData = res.data.category_list;
          this.total = res.data.category_count;
        }
      });
    },
    //移动端
    yidongduan(index, row) {
      updateCategory({ id: row.id, nav_status: row.nav_status }).then((res) => {
        if (res.status === 1) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //是否启用
    shifouqiyong(index, row) {
      updateCategory({ id: row.id, show_status: row.show_status }).then(
        (res) => {
          if (res.status === 1) {
            this.$message.success("启用成功");
          } else {
            this.$message.error("启用失败");
          }
        }
      );
    },
    // shifouqiyong(index,row) {
    //   updateCategory({ id: row.id, show_status: row.show_status }).then(() => {
    //     delCategory(row.id).then((res) => {
    //       if (res.status === 1) {
    //         this.$message.success("启用成功");
    //       } else {
    //         this.$message.error("启用失败");
    //       }
    //     });
    //   });
    // },
    //编辑
    bianji(index,row) {
       this.$router.push({
        path: "/pm/productCateUpdate",
        query: { id: row.id },
      });
    },
    //删除
    shanchu(index, row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delCategory(row.id).then((res) => {
            if (res.status === 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error("删除失败");
            }
            this.getList(); // 删除完后，需要重新获取数据源
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //查看下一级
    xiayiji(index, row) {
      console.log(row.parent_id);
      this.$router.push({
        path: "/pm/productCategory",
        query: { parentId: row.id },
      });
    },

    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  margin: 20px 0;
}
.tian {
  float: right;
}
</style>